<template>
    <div>
        <van-nav-bar title="面经详情" fixed placeholder>
            <template #left>
                <span class="back" @click="$router.back()">返回</span>
            </template>
        </van-nav-bar>

        <div class="content-container">
            <div>
                <h1 class="article-title">{{ article.stem }}</h1>
                <p class="article-state"> {{ article.createdAt }} | {{article.likeCount }} 浏览量 | {{ article.views }} 点赞数 </p>
                <div class="aricle-auto">
                    <img :src="article.avatar">
                    <p class="article-author">&nbsp;&nbsp;{{ article.creator }}</p>
                </div>
            </div>
        </div>
        <div class="article-content" v-html="article.content">
        </div>
                <!-- 点赞/收藏 -->
        <div class="like" :class="{ active: article.likeFlag === 1 }" @click="clike">
            <van-icon name="like-o" />
        </div>
        <div class="collect " :class="{ active: article.collectFlag === 1 }" @click="ccollect">
            <van-icon name="star-o" />
        </div>
    </div>
</template>

<script>
import { getArticleDetail } from "@/api/article";
import { getlikecollection } from "@/api/article";
export default {
    created() {
        this.loadArticle()
    },
    data() {
        return {
            article: {}
        }
    },
    methods: {
        async loadArticle() {
            const res = await getArticleDetail(this.$route.params.id)   //传id过去
            this.article = res.data.data;
        },
        async clike() {
            //调用接口
            await getlikecollection({
                id: this.$route.params.id,
                optType: 1,
            })
            this.loadArticle()
        },
        async ccollect() {
            //调用接口
            await getlikecollection({
                id: this.$route.params.id,
                optType: 2,
            })
            this.loadArticle()
        }
    },

}
</script>

<style lang="scss" scoped>

    .back{
        color: #FA6D1D;
    }
    .content-container{
        >div{
            padding: 30px;
            .article-title{
                font-size: 50px;
            }
            .article-state{
                padding: 20px 0;
                font-size: 30px;
                color: gray;
            }
            .aricle-auto{
                display: flex;
                justify-content: start;
                align-items: center;
                img{
                    width: 100px;
                    height: 100px;
                }
                font-size: 30px;
                color: gray;

            }
        }
    }
    .article-content{
        padding: 30px;
        padding-top: 0px;
        font-size: 30px;
    }
    .like,
.collect {
    position: fixed;
    bottom: 200px;
    right: 50px;
    width: 80px;
    height: 80px;
    box-shadow: 5px 5px 25px #ccc;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 5px 5px 25px #ccc;
    background-color: #fff;

    &.active {
        background-color: #FEC635;

        .operation-icon {
            color: #fff;
        }
    }
}
.collect {
    margin-right: 100px;
}

</style>
